import React, { PureComponent } from "react";
import { connect } from "dva";
import { Map } from 'react-amap';
import { getConfig } from '../../../config';
import d1 from '../../assets/img/d1.svg';
import d2 from '../../assets/img/d2.svg';

const config = getConfig();
const mapKey = config.mapKey;


@connect(({ monitor,loading }) => ({
  // dictionaries:global.dictionaries,
  mapData:monitor.mapData,
  loading: loading.models.monitor,
}))

class UIMarker extends React.Component {
  constructor() {
    super();
    // this.loadUI();
  }

  componentDidMount() {
    this.timerID = setTimeout(
      () => this.loadUI(),
      200
    );

  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  loadUI() {
    window.AMapUI.loadUI(['misc/MarkerList'], (MarkerList) => {
      this.initPage(MarkerList);
    })
  }

  initPage(MarkerList) {
    const map = this.props.__map__;
    const { mapData, dictionaries } =this.props;

    // const repairStatus = dictionaries.repairStatus && dictionaries.repairStatus.length>1
    //   ? dictionaries.repairStatus.map(item=>item.label)
    //   :[];

    // const colors=['red','darkblue','black','darkyellow','orange'];
    // const colors=['purple','yellow','darkblue','darkyellow','orange'];


    const markerList = new MarkerList({
      map: map, //关联的map

      //列表的dom容器的id
      // listContainer: 'my-list',

      //选中状态（通过点击列表或者marker）时在Marker和列表节点上添加的class，可以借此编写css控制选中时的展示效果
      // selectedClassNames: 'selected',

      //首先置空默认的触发选中的事件
      makeSelectedEvents: null,

      //确定监听了列表节点的click事件
      listElementEvents: ['click'],

      //返回数据项的Id
      getDataId: function(dataItem, index) {
        //index表示该数据项在数组中的索引位置，从0开始，如果确实没有id，可以返回index代替
        return dataItem.id;
      },

      //返回数据项的位置信息，需要是AMap.LngLat实例，或者是经纬度数组，比如[116.789806, 39.904989]
      getPosition: function(dataItem) {
        // console.log('dataItem',dataItem)
        return [dataItem.longitude,dataItem.latitude];
      },
      //返回数据项对应的Marker
      getMarker: function(dataItem, context, recycledMarker) {

        //marker的标注内容
        const content = dataItem.pointName;

        const label = {
          offset: new AMap.Pixel(16, 18), //修改label相对于marker的位置
          content: content
        };

        //存在可回收利用的marker
        if (recycledMarker) {
          //直接更新内容返回
          recycledMarker.setLabel(label);
          return recycledMarker;
        }

        //返回一个新的Marker
        return new AMap.Marker({
          label: label
        });
      },

      //返回数据项对应的列表节点
      getListElement: function(dataItem, context, recycledListElement) {

        const tpl = '<p><%- dataItem.id %>：<%- dataItem.desc %><br/>' +
          '<p><button class="my-btn">点我才选中</button>';

        const content = MarkerList.utils.template(tpl, {
          dataItem: dataItem,
          dataIndex: context.index
        });

        if (recycledListElement) {
          //存在可回收利用的listElement, 直接更新内容返回
          recycledListElement.innerHTML = content;
          return recycledListElement;
        }

        //返回一段html，MarkerList将利用此html构建一个新的dom节点
        return '<li>' + content + '</li>';
      }
    });


    //展示该数据
    markerList.render(mapData.filter(item => item.longitude && item.latitude ));

  }

  render() {
    return null;
  }
}


const initCallback = () => {
  console.log("AMapUI Loaded Done")
}


export default class Maps extends PureComponent {
  constructor(props) {
    super(props);

  }

  componentDidMount() {

  }


  render() {
    const { mapData } =this.props;
    const plugins = [
      // 'MapType',
      'Scale',
      // 'OverView',
      // 'ControlBar', // v1.1.0 新增
      {
        name: 'ToolBar',
        options: {
          visible: true,  // 不设置该属性默认就是 true
        },
      }
    ]
    return (
      <div style={{height:'100%',width:'100%'}}>
        <Map amapkey={mapKey}
             zoom={14}
             useAMapUI={initCallback}
             plugins={plugins}
        >
          <UIMarker mapData={mapData}
                    // dictionaries={dictionaries}
          />
        </Map>
      </div>
    );
  }
}

